<template>
	<view>
		<view class="nav1">
			<u-navbar title="评价详情" bgColor="transparent" :fixed="false" :autoBack="false">
				<view class="flex" slot="left">
					<view class="nav-left flex">
						<u-icon name="arrow-left" size="24" @click="back"></u-icon>
						<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
						<u-icon name="home" size="24" @click="toHome"></u-icon>
					</view>
				</view>
			</u-navbar>
		</view>
		<u-gap height="10"></u-gap>
		<view class="ml30 mr30">
			<view class="pj-item bgFff radius30 p20" v-if="com_info.id">
				<view class="flex">
					<u-image :src="api_host + com_info.user.userAvatar" mode="" width="40px" height="40px"
						shape="circle"></u-image>
					<view class="ml10">
						<view class="c343 f28">{{com_info.user.userName}}</view>
						<view class="c999 f24">{{com_info.user.useTime}}</view>
					</view>
				</view>
				<u-gap height="10"></u-gap>
				<view class="flex flex-wrap">
					<view class="radius30 active f24 tag_item mr10 mb10" v-for="(item,index) in com_info.tagList"
						:key="index">{{item}}</view>
				</view>
				<u-gap height="10"></u-gap>
				<view class="rate-box">
					<v-rate :rateParams="detail" :stepScores="com_info.rate_arr" :readonly="true"></v-rate>
					<text class="f24 c999 ml10">{{com_info.commentTime}}</text>
				</view>
				<u-gap height="10"></u-gap>
				<view class="f26 c343" v-if="com_info.content">
					{{com_info.content}}
				</view>
				<u-gap height="10"></u-gap>
				<view class="pore flex flex-wrap" v-if="com_info.imgs.length > 0">
					<!-- <image :src="api_host + item" mode="widthFix" v-for="(item,index) in com_info.imgs" :key="index"
						@click="$utils.previewImages(index,com_info.imgs)"
						style="width: 31%;border-radius: 20rpx;margin-right: 10rpx;margin-bottom: 10rpx;">
					</image> -->
					<view class="mr10 mb10" v-for="(item,index) in com_info.imgs" :key="index"
						@click="$utils.previewImages(index,com_info.imgs)">
						<u-image :src="api_host + item" mode="aspectFill" width="100px" height="100px"
							radius="5"></u-image>
					</view>
				</view>
				<u-line color="#eee" length="100%" margin="20rpx 0"></u-line>
				<view class="flex" @click="nologinJump(detailPath)" v-if="detail.id">

					<u-image :src="api_host + detail.icon" mode="" width="40px" height="40px" radius="10"></u-image>
					<view class="ml10">
						<view class="c343 f28">{{detail.title}}</view>
						<view class="c999 f24 flex mt10">
							<u-icon name="star-fill" color="#FFDE6D"></u-icon>
							<view>{{detail.mark}} · {{detail.observeNumber}}条评价 
								<text v-if="detail.dictNameList && detail.dictNameList.length" style="margin-left: 8rpx;"> | </text>
								<text v-for="(item,index) in detail.dictNameList" :key="index"
									class="ml10">{{item}}</text>
							</view>
						</view>
					</view>
				</view>
				<u-gap height="20"></u-gap>
				<view class="flex-jus">
					<view class="flex1 mr20">
						<u-button color="#f7f7f7" icon="thumb-up-fill"
							:iconColor="com_info.isLike == 1?'#FF7F1C':'#34314F'"
							:customStyle="{'color':com_info.isLike == 1?'#FF7F1C':'#34314F','padding':'0 30rpx','height':'60rpx'}"
							shape="circle" @click="commnetStar">点赞
							{{com_info.likeVolume}}</u-button>
					</view>
					<view class="flex1 ml20">
						<u-button color="#f7f7f7" icon="chat-fill" iconColor="#34314F"
							:customStyle="{'color':'#34314F','padding':'0 30rpx','height':'60rpx'}" shape="circle">评论
							{{com_info.observeNumber}}</u-button>
					</view>
				</view>
			</view>
			<u-gap height="20"></u-gap>
			<view class="flex-jus">
				<text class="c343 bold f28">评论 ({{com_info.observeNumber || '0'}})</text>
				<!-- <view>
					<u-button color="#FFDE6D" :customStyle="{'color':'#34314F','height':'60rpx','fontSize':'26rpx'}"
						shape="circle" @click="show_filter = true">
						<view class="flex">
							<text class="mr30">{{sel_filter.name}}</text>
							<u-icon name="arrow-down" color="#34314F" size="14"></u-icon>
						</view>
					</u-button>
				</view> -->
			</view>
			<u-gap height="20"></u-gap>
			<view class="" v-if="com_info.id && com_info.reply!=null">
				<view class="flex flex-start mb30">
					<u-image :src="api_host + config.avatar" mode="" width="40px" height="40px"
						shape="circle"></u-image>
					<view class="ml20 mt10">
						<view class="c666 f26">平台回复</view>
						<view class="c343 f26 mt20">{{com_info.reply}}</view>
						<view class="c666 f24 mt10">{{com_info.replyTime}}</view>
					</view>
				</view>
			</view>
			<u-gap height="20"></u-gap>
			<view class="" v-if="commnetList.length > 0">
				<view class="flex flex-start mb30" v-for="(item,index) in commnetList" :key="index">
					<u-image v-if="item.user" :src="api_host + item.user.userAvatar" mode="" width="40px" height="40px"
						shape="circle"></u-image>
					<view class="ml20 mt10 flex1" style="width: 80%;">
						<view class="c666 f26" v-if="item.user">{{item.user.userName}}{{item.id}}</view>
						<view class="c343 f26 mt20" v-if="item.content">{{item.content}}</view>
						<u-gap height="10"></u-gap>
						<view class="pore flex flex-wrap" v-if="item.images">
							<u-image :src="api_host + img" mode="aspectFill" v-for="(img,imgIndex) in item.imgsArr"
								:key="imgIndex" @click="$utils.previewImages(imgIndex,item.imgsArr)" width="180rpx"
								height="180rpx" radius="5" style="margin-right: 10rpx;margin-bottom: 10rpx;">
							</u-image>
						</view>
						<view class="mt10 flex-jus flex-start">
							<view class="flex">
								<text class="c666 f24 flex1">{{item.createTime}}<!-- - {{item.addr}} --></text>
								<view class="ml20" v-if="item.userId == userInfo.id">
									<u-icon name="trash-fill" color="#666" @click="delCommentbtn(index,'',1)"></u-icon>
								</view>
							</view>
							<view class="flex ml20">
								<text class="c343 f26 mr20" @click="reply(item,1)">回复</text>
								<u-icon name="heart-fill" :color="item.isLike == 1?'#FF7F1C':'#999'"
									:label="item.likeVolume" :labelPos="item.isLike == 1?'#FF7F1C':'#999'"
									labelPos="right" labelSize="12" @click="commnetStaritem(item)"></u-icon>
							</view>
						</view>
						<view class="" v-show="item.open_children">
							<u-gap height="20"></u-gap>
							<!-- 二级评价 -->
							<view class="flex flex-start mb30" v-for="(citem,cindex) in item.children" :key="cindex">
								<u-image :src="api_host + citem.user.userAvatar" mode="" width="40px" height="40px"
									shape="circle"></u-image>
								<view class="ml20 mt10 flex1" style="width: 80%;">
									<view class="c666 f26 textoverflow width100"
										v-if="citem.replyUser && citem.replyUser.userName">
										<text>{{citem.user.userName}} 回复 {{citem.replyUser.userName}}</text>
									</view>
									<view class="c666 f26 textoverflow width100" v-else>
										<text>{{citem.user.userName}}</text>
									</view>
									<view class="c343 f26 mt20" v-if="citem.content">{{citem.content}}</view>
									<u-gap height="10"></u-gap>
									<view class="pore flex flex-wrap" v-if="citem.images">
										<u-image :src="api_host + img" mode="aspectFill"
											v-for="(img,imgIndex) in citem.images.split(',')" :key="imgIndex"
											@click="$utils.previewImages(imgIndex,citem.images.split(','))"
											width="150rpx" height="150rpx" radius="5"
											style="margin-right: 10rpx;margin-bottom: 10rpx;">
										</u-image>
									</view>
									<view class="mt10 flex-jus width100 flex-start">
										<view class="flex">
											<text
												class="c666 f24 flex1">{{citem.createTime}}<!-- - {{citem.addr}} --></text>
											<view class="ml20" v-if="citem.userId == userInfo.id">
												<u-icon name="trash-fill" color="#666"
													@click="delCommentbtn(index,cindex,2)"></u-icon>
											</view>
										</view>
										<view class="flex ml20">
											<text class="c343 f26 mr20" @click="reply(citem,2,item,index)">回复</text>
											<u-icon name="heart-fill" :color="citem.isLike == 1?'#FF7F1C':'#999'"
												:label="citem.likeVolume" :labelPos="citem.isLike == 1?'#FF7F1C':'#999'"
												labelPos="right" labelSize="12"
												@click="commnetStaritem(citem)"></u-icon>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="flex c666 mt20" v-if="item.children.length > 0" @click="openComment(item)">
							<view class="" style="margin-top: 4rpx;">
								<u-line color="#D2D7DA" length="27"></u-line>
							</view>
							<text class="f24 ml10 mr10" v-if="item.open_children">收起</text>
							<text class="f24 ml10 mr10" v-else>展开{{item.children.length}}条回复</text>
							<u-icon :name="item.open_children?'arrow-up':'arrow-down'" size="14"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-gap height="100"></u-gap>
		<view class="fix-bot bgFff" :style="{'bottom':fixBottom + 'px'}">
			<u-gap height="10"></u-gap>
			<view class="fix-bot-box ml10 mr10">
				<view class="" v-if="showInput" @click="showInputbtn">
					<view class="comment bgF7 radius50 p10">
						<u-textarea v-model="keyword" :focus="focus" @blur="inputBlur" @focus="inputFocus"
							:adjustPosition="false"
							:placeholder="reply_info.id?('回复'+reply_info.user.userName) : '良言一句三冬暖，恶语伤人六月寒'" height="20"
							fixed border="none" autoHeight></u-textarea>
						<view class="pore flex flex-wrap mt10" v-if="imgList.length > 0">
							<view class="img-item pore mr10 mb10" v-for="(item,index) in imgList" :key="index">
								<image :src="api_host + item" mode="" style="width: 100rpx;height: 100rpx;"
									class="radiusBox">
								</image>
								<view class="img-del" @click.stop="delImg(index)">
									<u-icon name="close-circle-fill" size="16" color="#FF7F1C"></u-icon>
								</view>
							</view>
						</view>
					</view>
					<u-gap height="10"></u-gap>
					<!-- <view class="flex-jus" @click="chooseAddress">
						<view class="left-label">
							<image src="../../static/images/you/address.png" mode=""
								style="width: 48rpx;height: 48rpx;">
							</image>
						</view>
						<view class="flex ml30">
							<text class="f26 mr20" :class="addr?'c343':'c999'">{{addr || '添加地点'}}</text>
							<u-icon name="arrow-right" color="#34314F"></u-icon>
						</view>
					</view>
					<u-gap height="5"></u-gap> -->
					<view class="flex-jus ml20 mr20">
						<view @click.stop="chooseImg">
							<u-icon name="photo" size="30" color="#34314F"></u-icon>
						</view>
						<view class="">
							<u-button color="#21B9AD" :disabled="!keyword && imgList.length == 0"
								:customStyle="{'color':'#fff','height':'60rpx'}" shape="circle"
								@click="addCommentbtn">发送</u-button>
						</view>
					</view>
				</view>
				<view class="flex-jus" v-else>
					<view class="bgF7 flex radius30 p20 flex1" @click="showInputbtn">
						<u-icon name="edit-pen" color="#999" size="20"></u-icon>
						<text class="ml10 f26 c999">分享一些想法...</text>
					</view>
				</view>
			</view>
			<u-gap height="20"></u-gap>
		</view>
		<u-overlay :show="showInput" @click="showInput = false,hideInput()" zIndex="100"></u-overlay>
		<u-action-sheet :actions="filter_list" title="筛选" :show="show_filter" @select="filterClick"
			@close="show_filter = false" cancelText="取消"></u-action-sheet>
		<u-modal :show="show_action" title="提示" content="确认删除评论？">
			<view class="" slot="confirmButton">
				<view class="flex-jus">
					<view class="flex1">
						<view class="mr20">
							<u-button color="#f7f7f7" :customStyle="{'color':'#111','height':'80rpx'}" shape="circle"
								@click="show_action = false">取消</u-button>
						</view>
					</view>
					<view class="flex1">
						<view class="ml20">
							<u-button color="#FFDE6D" :customStyle="{'color':'#111','height':'80rpx'}" shape="circle"
								@click="delComment">删除</u-button>
						</view>
					</view>
				</view>
			</view>
		</u-modal>
		<view class="back-top pore">
			<u-back-top :scroll-top="scrollTop" bottom="200" :customStyle="{'backgroundColor':'#FFDE6D'}"
				:iconStyle="{'color':'#000','fontSize':'40rpx','fontWeight':'bold'}"></u-back-top>
		</view>
	</view>
</template>

<script>
	import {
		getGoodsInfo
	} from '@/common/api_tuangou.js'
	import {
		getHomedetail,
		getCommendetail
	} from '@/common/api_housekeeping.js'
	import {
		userLike
	} from '@/common/api_user.js'
	import {
		getComment,
		addComment,
		commentLike,
		commentDel
	} from '@/common/api_wan.js'
	import vRate from '@/components/rate/index.vue'
	export default {
		name: '',
		components: {
			vRate
		},
		data() {
			return {
				scrollTop: 0,
				id: '',
				com_id: '',
				detail: {},
				com_info: {},
				commnetList: [],
				reply_info: {},
				showInput: false,
				focus: false,
				keyword: '',
				addr: '',
				imgList: [],
				lastPage: false,
				page: 1,
				pageSize: 20,
				total: 0,
				fixBottom: 0,
				show_filter: false,
				sel_filter: {
					name: '点赞',
					value: '1'
				},
				filter_list: [{
						name: '点赞',
						value: '1'
					},
					{
						name: '最新',
						value: '2'
					},
					{
						name: '最高分',
						value: '3'
					},
					{
						name: '最低分',
						value: '4'
					}
				],
				show_action: false,
				del_data: {},
				orderType: 0
			}
		},
		onLoad(option) {
			this.id = option.id
			this.com_id = option.com_id
			this.orderType = option.type
			console.log(option, 'option.type')
			if (this.orderType == 3) {
				this.getGoodsInfo()
			} else {
				this.getHomedetail()
			}
			this.getCommendetail()
			this.getComment()
		},
		computed: {
			detailPath() {
				// 1家政 3团购
				const url = this.detail.goodType === 1 ? '/subpage/housekeeping/detail' : '/groupPurchase/detail/index'
				return `${url}?id=${this.detail.id}`
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onShareAppMessage(res) {
			return {
				title: '东楚畅通',
				path: '/subpage/housekeeping/commentDetail?id=' + this.id + '&com_id=' + this.com_id,
				desc: '评价详情',
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			toHome() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			filterClick(item) {
				this.sel_filter = item
				this.show_filter = false
			},
			async getHomedetail() {
				const that = this
				uni.showLoading({
					mask: true
				})
				const res = await getHomedetail({
					id: this.id
				})
				if (res.code == 200) {
					console.log(res.data, 'getHomedetail')
					this.detail = res.data
				}
				uni.hideLoading()
			},
			async getGoodsInfo() {
				const that = this
				uni.showLoading({
					mask: true
				})
				const res = await getGoodsInfo({
					id: this.id
				})
				if (res.code == 200) {
					this.detail = res.data
				}
				uni.hideLoading()
			},
			async getCommendetail() {
				const that = this
				uni.showLoading({
					mask: true
				})
				const res = await getCommendetail({
					id: this.com_id
				})
				if (res.code == 200) {
					this.com_info = res.data
					this.com_info.rate_arr = this.com_info.stepScore.split(',')
					this.com_info.imgs = this.com_info.images ? this.com_info.images.split(',') : []
				}
				uni.hideLoading()
			},
			async getComment() { //评论列表
				uni.showLoading({
					mask: true
				})
				const res = await getComment({
					classify: '1',
					id: this.com_id,
					pageNum: this.page,
					pageSize: 10
				})
				if (res.code == 200) {
					const {
						lastPage,
						list
					} = res.data
					let data = list.map(item => {
						return {
							...item,
							open_children: false,
							imgsArr: item.images ? item.images.split(',') : []
						}
					})
					//this.total = res.total
					this.lastPage = lastPage
					this.commnetList = this.commnetList.concat(data)
				}
				uni.hideLoading()
			},
			async commnetStar() {
				const res = await userLike({
					operation: '2',
					busine: '5',
					speId: this.com_id
				})
				if (res.code == 200) {
					if (this.com_info.isLike == 1) {
						this.com_info.likeVolume = this.com_info.likeVolume - 1
					} else {
						this.com_info.likeVolume = Number(this.com_info.likeVolume) + 1
					}
					this.com_info.isLike = this.com_info.isLike == 1 ? 0 : 1
				}
			},
			async commnetStaritem(item) {
				const res = await commentLike({
					id: item.id
				})
				if (res.code == 200) {
					if (item.isLike == 1) {
						item.likeVolume = item.likeVolume - 1
					} else {
						item.likeVolume = Number(item.likeVolume) + 1
					}
					item.isLike = item.isLike == 1 ? 0 : 1
				}
			},
			delCommentbtn(index, index2, level) {
				this.del_data = {
					index,
					index2,
					level
				}
				this.show_action = true
				console.log(this.del_data);
			},
			async delComment() {
				let id = ''
				if (this.del_data.level == 1) {
					id = this.commnetList[this.del_data.index].id
				} else {
					id = this.commnetList[this.del_data.index].children[this.del_data.index2].id
				}
				console.log(this.del_data);
				this.show_action = false
				const res = await commentDel({
					id: id
				})
				if (res.code == 200) {
					if (this.del_data.level == 1) {
						this.commnetList.splice(this.del_data.index, 1)
						this.com_info.observeNumber = Number(this.com_info.observeNumber) - 1
					} else {
						this.commnetList[this.del_data.index].children.splice(this.del_data.index2, 1)
					}
				}
			},
			chooseAddress() {
				const that = this
				uni.chooseLocation({
					success(res) {
						that.addr = res.name
					}
				})
			},
			openComment(item) {
				item.open_children = !item.open_children
			},
			inputFocus(e) {
				this.fixBottom = e.detail.height
				console.log(e);
			},
			inputBlur(e) {
				this.fixBottom = 0
			},
			hideInput() {
				this.fixBottom = 0
				this.imgList = []
				this.addr = ''
				this.keyword = ''
				this.reply_info = {}
				this.showInput = false
				this.focus = false
			},
			showInputbtn() {
				this.showInput = true
				this.focus = true
			},
			reply(item, level, pitem, pindex) {
				this.showInput = true
				this.reply_info = item
				this.reply_info.level = level
				if (level == 2) {
					this.reply_info.pindex = pindex
					this.reply_info.p_info = JSON.parse(JSON.stringify(pitem))
				}
				console.log(this.reply_info);
				this.focus = true
			},
			chooseImg() {
				const that = this
				uni.chooseImage({
					count: 1,
					success: (res) => {
						res.tempFilePaths.forEach(async file => {
							const res1 = await that.$utils.uploadFile(file)
							if (res1.code == 200) {
								that.imgList.push(res1.full_url)
							}
						})
					}
				});
			},
			delImg(index) {
				this.imgList.splice(index, 1)
			},
			async addCommentbtn() {
				let data = {}
				if (this.reply_info.id) {
					if (this.reply_info.level == 1) {
						data = {
							vlogId: this.com_id,
							content: this.keyword,
							images: this.imgList.length > 0 ? this.imgList.join(',') : '',
							addr: this.addr,
							pid: this.reply_info.id,
							replyUserId: null,
							classify: '1'
						}
					} else {
						data = {
							vlogId: this.com_id,
							content: this.keyword,
							images: this.imgList.length > 0 ? this.imgList.join(',') : '',
							addr: this.addr,
							pid: this.reply_info.p_info.id,
							replyUserId: this.reply_info.user.id,
							classify: '1',
							fatherId: this.reply_info.id
						}
					}
				} else {
					data = {
						vlogId: this.com_id,
						content: this.keyword,
						images: this.imgList.length > 0 ? this.imgList.join(',') : '',
						addr: this.addr,
						pid: null,
						replyUserId: null,
						classify: '1'
					}
				}
				console.log(data);
				const res = await addComment(data)
				if (res.code == 200) {
					if (this.reply_info.id) {
						if (this.reply_info.level == 1) {
							this.reply_info.children.unshift(res.data)
						} else {
							this.commnetList[this.reply_info.pindex].children.unshift(res.data)
							//this.reply_info.p_info.children.unshift(res.data)
						}
					} else {
						let obj = res.data
						this.com_info.observeNumber = Number(this.com_info.observeNumber) + 1
						obj.open_children = false
						obj.imgsArr = obj.images ? obj.images.split(',') : []
						this.commnetList.unshift(obj)
					}
					this.imgList = []
					this.addr = ''
					this.keyword = ''
					this.focus = false
					this.showInput = false
					uni.showToast({
						title: '评论成功',
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F1F9F6;
	}

	.nav-left {
		border-radius: 50rpx;
		padding: 10rpx 20rpx;
		background-color: rgba(#fff, 0.8);
	}

	.tag_item {
		padding: 5rpx 20rpx;
		border: 1px solid transparent;
	}

	.active {
		color: #FF7F1C;
		background-color: #FFFAF5;
		border-color: #FF7F1C;
	}

	.fix-bot {
		border-radius: 20rpx 20rpx 0 0;
	}

	.img-del {
		position: absolute;
		right: 0;
		top: 0;
	}
</style>